revision:
The color is specified by: a color name (like "red"), a HEX value (like "#ff0000"), an RGB value (like "rgb(255,0,0)").
The default text color for a page is defined in the body selector.
"Text color" and "background color": for W3C compliant CSS: if you define the color property, you must also define the background-color.
A text can be left or right aligned, centered, or justified.
When the text-align property is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight.
The "direction" and "unicode-bidi" properties can be used to change the text direction of an element.
This property sets the vertical alignment of an element: top, middle, bottom.
This property is used to set or remove decorations from text.
The value "text-decoration: none;" is often used to remove underlines from links. The other text-decoration values are used to decorate text: overline, line-through, underline.
This property is used to specify uppercase and lowercase letters in a text.
It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word.
This property is used to specify the indentation of the first line of a text.
This property is used to specify the space between the characters in a text.
This property is used to specify the space between lines.
This propertyis used to specify the space between the words in a text.
This property specifies how white-space inside an element is handled.
This property adds shadow to text. In its simplest use, you only specify the horizontal shadow (2px) and the vertical shadow (2px). You also can add a color and a blur effect to the shadow.
1/ Serif fonts have a small stroke at the edges of each letter. They create a sense of formality and elegance.
2/ Sans-serif fonts have clean lines (no small strokes attached). They create a modern and minimalistic look.
3/ Monospace fonts - here all the letters have the same fixed width. They create a mechanical look.
4/ Cursive fonts imitate human handwriting.
5/ Fantasy fonts are decorative/playful fonts.
All the different font names belong to one of the generic font families.
font - sets all the font properties in one declaration,
font-family - specifies the font family for text,
font-size - specifies the font size of text,
font-style - specifies the font style for text,
font-variant - specifies whether or not a text should be displayed in a small-caps font,
font-weight - specifies the weight of a font.
The font-family property should hold several font names as a "fallback" system, to ensure maximum compatibility between browsers/operating systems.
Start with the font you want, and end with a generic family (to let the browser pick a similar font in the generic family, if no other fonts are available).
The font names should be separated with comma.
Note: If the font name is more than one word, it must be in quotation marks, like: "Times New Roman".
CSS "web safe fonts" are fonts that are universally installed across all browsers and devices.
However, there are no 100% completely web safe fonts. There is always a chance that a font is not found or is not installed properly.
Therefore, it is very important to always use fallback fonts. This means that you should add a list of similar "backup fonts" in the font-family property. If the first font does not work, the browser will try the next one, and the next one, and so on.
Always end the list with a generic font family name.
The following are the best web safe fonts for HTML and CSS: Arial (sans-serif), Verdana (sans-serif), Helvetica (sans-serif), Tahoma (sans-serif), Trebuchet MS (sans-serif), Times New Roman (serif), Georgia (serif), Garamond (serif), Courier New (monospace), Brush Script MT (cursive)
CSS "font fallbacks": commonly used font fallbacks, organized by the 5 generic font families: Serif, Sans-serif, Monospace, Cursive, Fantasy.
This property has three values:
normal - the text is shown normally,
italic - the text is shown in italics,
oblique - the text is "leaning" (oblique is very similar to italic, but less supported).
It specifies the weight of a font (normal, bold).
It specifies whether or not a text should be displayed in a small-caps font.
In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters appears in a smaller font size than the original uppercase letters in the text.
Being able to manage the text size is important in web design. However, you should not use font size adjustments to make paragraphs look like headings, or headings look like paragraphs.
Always use the proper HTML tags, like <h1> - <h6> for headings and <p> for paragraphs.
The font-size value can be an absolute, or relative size.
absolute size sets the text to a specified size, does not allow a user to change the text size in all browsers (bad for accessibility reasons); absolute size is useful when the physical size of the output is known.
relative size sets the size relative to surrounding elements.
Note: If you do not specify a font size, the default size for normal text, like paragraphs, is 16px (16px=1em).
Setting the text size with pixels gives you full control over the text size.
To allow users to resize the text (in the browser menu), many developers use "em" instead of "pixels". "1em" is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px.
The size can be calculated from "pixels" to "em" using this formula: pixels/16=em.
The solution that works in all browsers, is to set a default font-size in percent for the <body> element.
The text size can be set with a "vw unit", which means the "viewport width". That way the text size will follow the size of the browser window.
The font property is a shorthand property for: font-style, font-variant, font-weight, font-size/line-height, font-family.
Note: the font-size and font-family values are required. If one of the other values is missing, their default value are used.
Some display elements are traditionally difficult to style despite being commonly used. Checkboxes and radio buttons, for instance, are often replaced with a custom widget that mimics the behavior of these elements while hiding the browser's implementation.
The "accent-color" property in CSS is capable of re-tinting the accented color of form controls provided by the browser's default styles with a custom color value.
Syntax: accent-color: auto | <color>;
Syntax examples
/* Keyword */
accent-color: auto;
/* <color> */
accent-color: red;
accent-color: #f8a100
accent-color: rgba(102, 100, 70, 1);
accent-color: hsla(180, 100%, 70%, 1);
/* Global*/
accent-color: inherit;
accent-color: initial;
accent-color: revert;
accent-color: unset;
<div class="spec">
<form action="/foo.bar">
<p>Select your favorite outdoor adventure type</p>
<input type="radio" id="mountain" name="type" value="mountain">
<label for="mountain">Mountain</label><br>
<input type="radio" id="ocean" name="type" value="ocean">
<label for="ocean">Ocean</label><br>
<input type="radio" id="desert" name="type" value="desert">
<label for="desert">Desert</label>
</form>
</div>
<style>
input[type="radio"] {accent-color: magenta;}
</style>
Your browser does not support the accent-color property.
<div>
<p class="notice">Your browser does not support the <code>accent-color</code> property.</p>
<progress id="progress" min="0" max="100" value="50"></progress>
<progress id="progress1" min="0" max="80" value="30"></progress>
<progress id="progress2" min="0" max="200" value="100"></progress>
</div>
<style>
#progress {accent-color: #30cc7e; place-self: center; width: clamp(20vw, 60%, 45vw);}
#progress1 {accent-color: red; place-self: center; width: clamp(20vw, 60%, 45vw);}
#progress2 {accent-color: pink; place-self: center; width: clamp(20vw, 60%, 45vw);}
.notice {background: #fff9c4; border-radius: .6vw; padding: 0.5vw; text-align: center; width: clamp(20vw, 60%, 45vw); }
@supports (accent-color: #fff) {
.notice {display: none;}
}
</style>
When a string of text overflows the boundaries of a container it can make a mess of your whole layout.
Tools to manage text overflow:
- wrap text with word-break property: the two options are: "break-word" and "break-all".
- wrap text with overflow-wrap ptoperty: the two options are: "anywhere" and "break-word".
- truncate long strings with a CSS ellipsis (..., the three dots): this works only when the "overflow" and "text-overflow" properties are used together.
The "text-overflow property" with a "value of ellipsis" must be set on a parent element, relative to the text. Two additional properties must be specified: "overflow" and "white-space".
- limit the container text to a specified number of lines with the line-clamp property: the three dots at the end are added.
This property will only work with a "-webkit- vendor" prefix and a display property set to "-webkit-box" or "-webkit-inline-box".
- cut the string short with clip: will cut strings mid-character too.
- an empty string" ": appends the truncated string with whatever is defined and prevents it being cut off mid-character.
A fluid type of font size is needed that defines a font-size value that adjusts according to the viewport, just like responsive images. You can use a code to calculate the minimum and base size.
Three methods stand out to make typography responsive:
- basic approach: use media queries to incease font sizes.
- advanced approach: use the clamp function with the CSS custom properties:
the "clamp" function accepts three values: the minimum value, the preferred value, and the maximum value.
If the preferred value changes with the viewport width (i.e. vw units), then there a fluid typography that adapts to the viewport size and is capped by the minimum/maximum values.
- multiplier method: by injecting a "text-multiplier" variable into the text elements' size, they can be increased/decreased at a specific bereakpoint by editing the variable.